<template>
	<!-- 补发/入库记录 -->
	<a-modal :title="title" :width="1500" :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit"
		@cancel="handleCancel">
		<a-spin :spinning="formLoading">
			<!-- <a-form :form="form">
				<a-form-item label="送货单号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
					<a-input placeholder="请输入"
						v-decorator="['defectiveSendOrderNumber', { rules: [{ required: true, message: '请输入！' }] }]" />
				</a-form-item>
			</a-form> -->
			<a-table ref="table" style="margin-top: 15px;" size="default" :scroll="{ x: 1000, y: 1000 }"
				:columns="columns_deduction" :data-source="dataSource">
				<span slot="image" slot-scope="text,record">
					<image-preview1 :images="text" :imageUrl="record.emsMaterialResult.imageUrl" />
				</span>
				<span slot="status" slot-scope="text,record">
					<a-tag color="#f50">待扣款</a-tag>
				</span>
				<span slot="orderNumber" slot-scope="text,record">
					{{ record.orderNumber ? record.orderNumber : '--' }}
				</span>
				<span slot="num" slot-scope="text,record">
					{{ record.num ? record.num : '--' }}
				</span>
				<span slot="remark" slot-scope="text,record">
					{{ record.remark ? record.remark : '--' }}
				</span>
				<span slot="deductionPrice" slot-scope="text,record">
					<a-input-number v-model="record.deductionPrice" placeholder="请输入" :precision="2" :min="0" />
				</span>
				<span slot="deductionNum" slot-scope="text,record">
					<a-input-number v-model="record.deductionNum" placeholder="请输入" :min="0" :max="record.num" />
				</span>
			</a-table>
		</a-spin>
	</a-modal>
</template>

<script>
import {
	deduction
} from '@/api/modular/main/badPool'
import { STable } from '@/components'
import { getUrlParam } from '@/utils/util'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import Vue from 'vue'

export default {
	components: {
		STable,
	},
	props: ['materialType'],
	data() {
		return {
			dialogType: '',
			labelCol: {
				xs: { span: 2 },
				sm: { span: 2 }
			},
			wrapperCol: {
				xs: { span: 8 },
				sm: { span: 8 }
			},
			orgTree: [],
			visible: false,
			formLoading: false,
			confirmLoading: false,
			route_path: '',
			form: this.$form.createForm(this),
			columns_deduction: [
				{
					title: '序号',
					width: '80px',
					align: 'center',
					customRender: (text, record, index) => `${index + 1}`
				},
				{
					title: '料号',
					dataIndex: 'emsMaterialResult.materialCode',
				},
				{
					title: '名称',
					dataIndex: 'emsMaterialResult.materialName',
				},
				{
					title: '规格',
					dataIndex: 'emsMaterialResult.materialModelNumber'
				},
				{
					title: '采购价',
					dataIndex: 'emsMaterialResult.purchasePrice'
				},
				{
					title: '图片',
					align: 'center',
					dataIndex: 'emsMaterialResult.image',
					scopedSlots: { customRender: 'image' }
				},
				{
					title: '状态',
					align: 'center',
					dataIndex: 'status',
					scopedSlots: { customRender: 'status' }
				},
				{
					title: '采购单号',
					dataIndex: 'orderNumber',
					scopedSlots: { customRender: 'orderNumber' },
				},
				{
					title: '不良数量',
					dataIndex: 'num',
					align: 'center',
					scopedSlots: { customRender: 'num' }
				},
				{
					title: '备注',
					scopedSlots: { customRender: 'remark' }
				},
				{
					title: '扣款数量',
					scopedSlots: { customRender: 'deductionNum' }
				},
				{
					title: '单个扣款金额',
					scopedSlots: { customRender: 'deductionPrice' }
				},
				{
					title: '小计',
					width: '150px',
					customRender: (text, record, index) => `${(record.deductionNum || 0) * (record.deductionPrice || 0)}`
				},
			],
			dataSource: [],
			title: "",
			record: {},
		}
	},
	created() {
		this.route_path = getUrlParam(this.$route.path).materialType
		console.log("route_path", this.route_path);
	},
	methods: {
		// 初始化方法
		init(record, list) {
			this.visible = true;
			this.title = "扣款";
			this.record = record;
			console.log(list);

			this.dataSource = JSON.parse(JSON.stringify(list)).map(val => {
				return {
					...val,
					deductionNum: val.reissueNum - (val.rkNum ? val.rkNum : 0)
				}
			})
			console.log(this.dataSource);

		},
		handleSubmit() {
			const { form: { validateFields } } = this

			validateFields((errors, values) => {
				if (!errors) {
					let index = this.dataSource.filter(val => !val.deductionNum || !val.deductionPrice);
					if (index.length != 0) {
						return this.$message.error("扣款数量/扣款金额不能为空");
					}
					let deductionList = this.dataSource.map(val => {
						return {
							defectivePoolMaterialId: val.id,
							deductionNum: val.deductionNum,
							deductionPrice: val.deductionPrice
						}
					})
					this.$confirm({
						title: '提示',
						content: '扣款后存在未入库与待扣款物料不可再次扣款，是否确定扣款?',
						onOk: () => {
							let params = {
								id: this.record.id,
								deductionTime: values.deductionTime,
								deductionList: deductionList
							}
							this.confirmLoading = true;
							deduction(params).then(res => {
								if (res.code == 200) {
									this.$message.success("扣款成功");
									this.$emit("ok");
									this.handleCancel();
								}
							}).finally((res) => {
								this.confirmLoading = false
							})
						},
						onCancel() {
						}
					})					
				} else {
					this.confirmLoading = false
				}
			})
		},
		handleCancel() {
			this.visible = false;
			this.form.resetFields();
		},
	}
}
</script>

<style>
.inputDiv {
	width: 100%;
	line-height: 32px;
	cursor: pointer;
	background: #eee;
	border: 1px solid #bbb;
	padding-left: 10px;
}
</style>
